<template>
  <div class="my-container">
    <van-cell-group v-if="user" class="my-info">
    <van-cell
     class="base-info"
     title="单元格"
    value="内容"
    center
    :border="false"
    >
    <van-image
      class="img-top"
      slot="icon"
      width="66"
      height="66"
      round
      fit="cover"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <div slot="title" class="text">昵称</div>
    <van-button
    size="small"
    round
    >编辑资料</van-button>
    </van-cell>
    <van-grid :border="false"  class="data-info">
    <van-grid-item class="data-info-item">
      <div solt="text" class="data-text">
        <div solt="span" class="count">123</div>
        <div solt="text" class="text">头条</div>
      </div>
    </van-grid-item>
    <van-grid-item class="data-info-item">
      <div solt="text" class="data-text">
        <div solt="span" class="count">123</div>
        <div solt="text" class="text">关注</div>
      </div>
    </van-grid-item>
    <van-grid-item class="data-info-item">
      <div solt="text" class="data-text">
        <div solt="span" class="count">123</div>
        <div solt="text" class="text">粉丝</div>
      </div>
    </van-grid-item>
    <van-grid-item class="data-info-item">
      <div solt="text" class="data-text">
        <div solt="span" class="count">123</div>
        <div solt="text" class="text">获赞</div>
      </div>
    </van-grid-item>
    </van-grid>
  </van-cell-group>
  <div v-else class="not-login">
    <div class="mobile" @click="$router.push('/login')">
      <img src="../../../public/手机.png" alt="">
    </div>
    <div class="login-text" @click="change()">登录 / 注册</div>
  </div>
  <van-grid :column-num="2" class="nav-grid md-4">
  <van-grid-item
  icon="star-o"
  text="收藏"
  class="nav-grid-item"
   />
  <van-grid-item
  icon="browsing-history-o"
  text="历史"
  class="nav-grid-item"
  />
  </van-grid>
  <van-cell title="消息通知" is-link to="/" />
  <van-cell class="mb-4" title="小智同学" is-link to="/" />
  <van-cell class="logout-cell" @click="$router.push('/login')" title="退出登录" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: false
    }
  },
  methods: {
    change () {
      this.user = true
    }
  }
}
</script>

<style lang="less">
.my-container {
  .my-info {
    background-color: rgb(71, 9, 141);
    .base-info {
      box-sizing: border-box;
      height: 115px;
      padding-top: 38px;
      padding-bottom: 11px;
      background-color: unset;
      .img-top {
        border:2px solid white;
      }
    }
    .van-grid-item__content {
      background-color: unset;
    }
    .van-cell__title{
      color:white;
      margin-left:5%;
    }
    .van-button {
      color: #666666;
    }
    .data-info {
      .data-info-item {
        height: 65px;
        color: #fff;
        .van-grid-item__content {
          .data-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .count {
            font-size: 18px;
            }
            .text {
            font-size: 11px;
            }
          }
        }
      }
    }
  }
  .not-login {
    height: 6rem;
    background-color: blue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .mobile img {
      width: 2.5rem;
      height: 2.5rem;
    }
    .login-text {
      font-size:0.8em;
      color:white;
    }
  }
  .nav-grid {
     .nav-grid-item {
        height: 2.5rem;
     }
     .van-icon {
       color: red;
     }
     .van-grid-item__text {
       font-size: 14px;
       color: #333333;
     }
  }
  .logout-cell {
    text-align: center;
    color: red;
  }
  .mb-4 {
    margin-bottom: 0.5rem;
  }
}
</style>
